<template>
	<view class="index-content">
	  <view class="index-block">
      <view class="index-block-title">果店销售统计</view>
      <u-row gutter="16">
        <u-col span="6">
          <view class="item-tj item-tj-frist">
            <view style="padding: 16rpx; height: 100%; position: relative;">
              <view style="display: flex; color: white;">
                <text>当日销售额</text>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <u-count-to :startVal="0" :endVal="fruitsEndVal" :duration="1500" color="#fff" separator=","></u-count-to>
              </view>
            </view>
          </view>
        </u-col>
        <u-col span="6">
          <!-- <view class="item-tj item-tj-second">
            <view style="padding: 16rpx; height: 100%; position: relative;">
              <view style="display: flex; color: white;">
                <text>昨日销售额</text>
              </view>
              <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
                <u-count-to :startVal="1" :endVal="2349" :duration="1500" color="#fff" separator=","></u-count-to>
              </view>
            </view>
          </view> -->
        </u-col>
      </u-row>
    </view>
	
	
	<view class="index-block">
	  <view class="index-block-title">仓库出库统计</view>
	  <u-row gutter="16">
	    <u-col span="6">
	      <view class="item-tj item-tj-frist">
	        <view style="padding: 16rpx; height: 100%; position: relative;">
	          <view style="display: flex; color: white;">
	            <text>当日销售额</text>
	          </view>
	          <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
	            <u-count-to :startVal="0" :endVal="goodsEndVal" :duration="1500" color="#fff" separator=","></u-count-to>
	          </view>
	        </view>
	      </view>
	    </u-col>
	    <u-col span="6">
	      <!-- <view class="item-tj item-tj-second">
	        <view style="padding: 16rpx; height: 100%; position: relative;">
	          <view style="display: flex; color: white;">
	            <text>昨日销售额</text>
	          </view>
	          <view style="position: absolute; bottom: 48rpx; right: 16rpx;">
	            <u-count-to :startVal="1" :endVal="2349" :duration="1500" color="#fff" separator=","></u-count-to>
	          </view>
	        </view>
	      </view> -->
	    </u-col>
	  </u-row>
	</view>
	
    <view class="index-block">
      <view class="index-block-title">当日果店销售明细</view>
      <view>
           <view class="h-table h-table-primary">
           	<view class="h-tr h-tr-3 h-thead">
           		<view class="h-td">水果名称</view>
           		<view class="h-td">销售日期</view>
           		<view class="h-td">销售总额</view>
           	</view>
           	<view class="h-tr h-tr-3" v-for="(item, index) in fruitsSalesInfoList"
			 :key="index" :isLink="true" :border="true" >
           		<view class="h-td">{{item.fruitsName }}</view>
           		<view class="h-td">{{item.salesTime }}</view>
           		<view class="h-td">{{item.salesTotal}}</view>
           	</view>
           </view>
      </view>
    </view>
	
	<view class="index-block">
	  <view class="index-block-title">当日仓库出库明细</view>
	  <view>
	       <view class="h-table h-table-primary">
	       	<view class="h-tr h-tr-4 h-thead">
	       		<view class="h-td h-td-colspan">商品名称</view>
	       		<view class="h-td" style="width: 210rpx;">销售日期</view>
	       		<view class="h-td">销售总额</view>
				<view class="h-td">销售员</view>
	       	</view>
	       	<view class="h-tr h-tr-4" v-for="(item, index) in goodsSalesInfoList" 
			:key="index" :isLink="true" :border="true">
	       		<view class="h-td h-td-colspan">{{item.goodsName }}</view>
	       		<view class="h-td" style="width: 210rpx;">{{item.salesTime }}</view>
	       		<view class="h-td">{{item.salesTotal}}</view>
				<view class="h-td">{{item.nickName}}</view>
	       	</view>
	       </view>
	  </view>
	</view>
	
	</view>
</template>

<script>
import Navbar from '@/components/navbar/Navbar'
import * as FruitsSalesInfoApi from '@/api/fruits/fruitsSalesInfo'
import * as GoodsSalesInfoApi from '@/api/goods/goodsSalesInfo'

let _now = new Date();
let now_time = {};
now_time.year = _now.getFullYear()
now_time.month = _now.getMonth() + 1
now_time.day = _now.getDay()

export default {
  components: {
    Navbar,
  },
  data () {
    return {
		fruitsSalesInfoList:[],
		fruitsEndVal:0,
		goodsSalesInfoList:[],
		goodsEndVal:0,
		params: {
			salesTime: null,
		},
    }
  },
  onLoad() {
	this.params.salesTime = uni.$u.timeFormat(this.timestamp, 'yyyy-mm-dd')
  	this.getFruitsSalesInfoList();
	this.getGoodsSalesInfoList();
	
	//加载用户权限
	this.$store.dispatch('Info').then(res => {
	})
  },
 methods: {
   // 加载用户列表数据
   getFruitsSalesInfoList () {
		FruitsSalesInfoApi.listFruitsSalesInfoAll(this.params).then(res => {
				this.fruitsSalesInfoList = res.rows;
				if(res.rows)
				{
					if(res.rows.length)
					{
						this.fruitsEndVal = 0
						for(let i=0;i<res.rows.length;i++)
						{
							let temp = res.rows[i];
							this.fruitsEndVal = this.fruitsEndVal+parseFloat(temp.salesTotal)
						}
					}
				}
		})
   },
   getGoodsSalesInfoList () {
   		GoodsSalesInfoApi.listGoodsSalesInfoAll(this.params).then(res => {
   				this.goodsSalesInfoList = res.rows;
				if(res.rows)
				{
					if(res.rows.length)
					{
						this.goodsEndVal=0
						for(let i=0;i<res.rows.length;i++)
						{
							let temp = res.rows[i];
							this.goodsEndVal = this.goodsEndVal+parseFloat(temp.salesTotal)
						}
					}
				}
   		})
   },
   getUsers () {
     const app = this
     app.$store.dispatch('users').then(res => {
     })
   },
    
 }
}
</script>

<style lang="scss">
.index-content {
  background-color: #f3f4f6;
  min-height: 100vh;
}
.index-block {
  padding: 40rpx;
  background-color: #fff;
}
.index-block-title {
  font-size: 40rpx;
  font-weight: bold;
  padding: 0 0 40rpx 0;
}
.item-tj {
  width: 100%;
  height: 160rpx;
  border-radius: 16rpx;
  
  &-frist {
    background-color: rgba($color: #2979ff, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }

  &-second {
    background-color: rgba($color: #303133, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }

  &-thrid {
    background-color: rgba($color: #19be6b, $alpha: 0.8);
    // background-image: url('/static/img/bg/qb.png');
  }
}
.detail_list{
  height: 700rpx;
  overflow: auto;
  color: #9E9E9E;
  .detail_item{
    display: flex;
    margin: 20rpx 0;
    align-items: center;
    .icon{
      width: 30%;
      text-align: center;
      li{
        font-size: 80rpx;
      }
    }
    .right_content{
      width: 50%;
      text-align: center;
    }
    .icon-income{
      color:#4AABF9;
    }
    .icon-expend{
      color: #E45521;
    }
    .money{
      color: #000;
    }
  }
}
</style>
<style lang="scss">
	/* 引入表格样式表 */
	@import "@/lib/helang-table.scss";
	
	/* 示例样式开始 */
	.content {
		font-size: 28rpx;
		background-color: #f3f3f3;
		padding: 20rpx;
		
		.red{
			background-color: #DD524D;
			color: #fff;
			text-align: center;
		}
		
		.green{
			background-color: #42b983;
			color: #fff;
			text-align: center;
		}
		
		.blue{
			background-color: #007AFF;
			color: #fff;
			text-align: center;
		}
		
		.yellow{
			background-color: #ffaa00;
			color: #fff;
			text-align: center;
		}
		

		.itme-box {
			padding: 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.title {
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				border-bottom: #e5e5e5 solid 1px;
				line-height: normal;
			}
			
			.width-fill{
				width: 100%;
			}
			
			.preview-box{
				height: 400rpx;
				box-shadow: 0 0 4px rgba(0,0,0,0.3);
			}
		}
	}
	/* 示例样式结束 */
</style>
